{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-tachometer-alt me-2"></i>控制台</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">刷新</button>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-number text-primary">156</div>
            <div class="stat-label">总职位数</div>
            <i class="fas fa-briefcase fa-2x text-primary mt-2"></i>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-number text-success">8</div>
            <div class="stat-label">覆盖城市</div>
            <i class="fas fa-city fa-2x text-success mt-2"></i>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-number text-warning">12</div>
            <div class="stat-label">行业分类</div>
            <i class="fas fa-industry fa-2x text-warning mt-2"></i>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-number text-info">24.5k</div>
            <div class="stat-label">平均薪资</div>
            <i class="fas fa-dollar-sign fa-2x text-info mt-2"></i>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card dashboard-card h-100">
            <div class="card-body text-center p-4">
                <i class="fas fa-search fa-3x text-primary mb-3"></i>
                <h5 class="card-title">职位检索</h5>
                <p class="card-text">按城市、行业、薪资搜索职位信息，快速找到心仪工作</p>
                <a href="{{ url_for('page1') }}" class="btn btn-primary mt-3">进入功能</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card dashboard-card h-100">
            <div class="card-body text-center p-4">
                <i class="fas fa-chart-bar fa-3x text-success mb-3"></i>
                <h5 class="card-title">薪资分析</h5>
                <p class="card-text">箱线图和热力图分析薪资分布，了解行业薪资水平</p>
                <a href="{{ url_for('page2') }}" class="btn btn-success mt-3">进入功能</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card dashboard-card h-100">
            <div class="card-body text-center p-4">
                <i class="fas fa-cloud fa-3x text-warning mb-3"></i>
                <h5 class="card-title">技能词云</h5>
                <p class="card-text">可视化各职位技能要求，了解市场技术趋势</p>
                <a href="{{ url_for('page3') }}" class="btn btn-warning mt-3">进入功能</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card dashboard-card h-100">
            <div class="card-body text-center p-4">
                <i class="fas fa-graduation-cap fa-3x text-info mb-3"></i>
                <h5 class="card-title">学历分析</h5>
                <p class="card-text">学历分布和各行业学历要求，了解就业门槛</p>
                <a href="{{ url_for('page4') }}" class="btn btn-info mt-3">进入功能</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card dashboard-card h-100">
            <div class="card-body text-center p-4">
                <i class="fas fa-robot fa-3x text-danger mb-3"></i>
                <h5 class="card-title">薪资预测</h5>
                <p class="card-text">基于机器学习的薪资预测模型，智能评估岗位价值</p>
                <a href="{{ url_for('page5') }}" class="btn btn-danger mt-3">进入功能</a>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="fas fa-info-circle me-2"></i>系统说明</h5>
            </div>
            <div class="card-body">
                <p>本系统基于BOSS招聘数据，提供全面的数据分析和可视化功能：</p>
                <ul>
                    <li><strong>数据来源：</strong>BOSS直聘招聘数据</li>
                    <li><strong>技术栈：</strong>Hadoop 3.4.1 + Spark 3.4.1 + Python 3.8.20 + Flask</li>
                    <li><strong>功能特色：</strong>智能检索、多维分析、AI预测、实时可视化</li>
                    <li><strong>更新频率：</strong>数据每日自动更新</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}